<!--
 * @Description: 工单详情
 * @Author: charles
 * @Date: 2021-12-14 22:10:42
 * @LastEditors: charles
 * @LastEditTime: 2021-12-14 22:10:43
-->
<template>

  <!-- 返回按钮 -->
  <div class="back">
    <el-page-header @back="$event => $router.go(-1)"></el-page-header>

    <div style="margin: 20px 0;"></div>

  <!-- 表格 -->

    <div class="descriptions" style="margin-top:50px height: 400px;">
      <el-descriptions title="工单详情" direction="vertical" :column="4" border>

        <el-descriptions-item label="账户姓名" label-class-name="my-label" content-class-name="my-content">{{orderData.account_name}}</el-descriptions-item>

        <el-descriptions-item label="工程名称" label-class-name="my-label" content-class-name="my-content">{{orderData.engineer_name}}</el-descriptions-item>

        <el-descriptions-item label="设备名称" label-class-name="my-label" content-class-name="my-content">{{orderData.device_name}}</el-descriptions-item>

        <el-descriptions-item label="状态" label-class-name="my-label" content-class-name="my-content">
          <el-tag >{{orderData.status}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="工单类型" label-class-name="my-label" content-class-name="my-content">{{orderData.type}}</el-descriptions-item>

        <el-descriptions-item label="报修原因" label-class-name="my-label" content-class-name="my-content">{{orderData.bill_why}}</el-descriptions-item>

      </el-descriptions>
    </div>

    <div style="margin: 20px 0;"></div>

    
    <div class="table1">
            <el-descriptions title="工程信息">
              <el-descriptions-item label="工程编号">{{engineer.serial_number}}</el-descriptions-item>
              <el-descriptions-item label="工程名称">{{engineer.name}}</el-descriptions-item>
              <el-descriptions-item label="工程类型">{{engineer.type}}</el-descriptions-item>
              <el-descriptions-item label="工程状态">
                <el-tag size="small">{{engineer.status}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="联系地址">{{engineer.address}}</el-descriptions-item>
            </el-descriptions>
          </div>
  
          <div style="margin: 20px 0;"></div>


          <div class="table2">
            <el-descriptions title="设备信息">
              <el-descriptions-item label="工程设备">{{empData.serial_number}}</el-descriptions-item>
              <el-descriptions-item label="设备名称">{{empData.name}}</el-descriptions-item>
              <el-descriptions-item label="绑定状态">
                <el-tag size="small">{{empData.bind_status}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="在线状态">
                <el-tag size="small">{{empData.online_status}}</el-tag>
              </el-descriptions-item>
  
            </el-descriptions>
          </div>

  </div>  
</template>
  
<script>
  import { get } from '@/utils/request'
  export default {
    data() {
      return {
        engineer: [],
        empData:[],
        ID: {
          id:'',
        },
        //工单详情数据
        orderData:{}
      };
    },
    computed: {},
    methods: {
      async getEmpData() {
            let res = await get('/device/findDeviceDetail', this.ID)

            //console.log(res,'00000');

          this.empData = res.data
          this.engineer = res.data.engineer
        },
    },
    created() {
      //接受路由传递参数
      //console.log(this.$route.query)
      this.orderData = {...this.$route.query};
      this.ID.id = this.orderData.device_id
      this.getEmpData()
    },
    mounted() {
      //this.getEmpData()
    
    },
  };
</script>

<style>
  .my-content {
    background: #bdd36e;
  }

</style>